<!-- 标签选择器只能泛泛地用在同意标签内容上，当要精准设置某处内容样式时难以做到 -->
 <!-- 在此通过类选择器实现差异化调配样式 -->

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        /* 定义类选择器 */
        /* 设置字体为红色 */
        .red {
            color: red;
        }

        /* 再定义一个类选择器，设置字体大小 */
        .size {
            font-size: 20px;
        }

        /* 设置字体为蓝色 */
        .blue {
            color: blue;
        }
    </style>
 </head>
 <body>
    <!-- 使用类选择器调配内容样式 -->
    <!-- 一个类选择器可以给多个标签使用 -->
    <p class="red">类选择器设置该段字体为红色</p>
    
    <p class="red blue">类选择器的冲突试验</p>
    <!-- 实验结果是蓝色 -->

    <!-- 一个标签可以使用多个类名,class属性值写多个类名,类名用空格隔开 -->
     <div class="red size">类选择器赋予一个段落两种属性</div>
    
 </body>
 </html>